<template>
  <div class="lt_avatar" :style="[sizeCpd]" @click="changeHander">
    <img :src="src" :style="[sizeCpd, shapeCpd]" :alt="alt" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { IAvatarProp, IavatarEmits } from './type'

const props = withDefaults(defineProps<IAvatarProp>(), {
  size: 100,
  shape: 'square'
})

const emit = defineEmits<IavatarEmits>()

// 计算大小
const sizeCpd = computed(() => {
  return `width: ${props.size}px; height: ${props.size}px;`
})

// 计算圆角
const shapeCpd = computed(() => {
  return props.shape === 'circle' ? 'border-radius: 50%;' : 'border-radius: 5px;'
})

// 点击图像
const changeHander = () => {
  emit('change', props.src)
}
</script>

<style scoped lang="scss">
.lt_avatar {
  cursor: pointer;
}
</style>
